<template>
  <el-container class="comment-view panel-block">
    <el-header class="sa-header">
      <div class="sa-title sa-flex sa-row-between">
        <div class="label sa-flex">
          <span class="left">商家列表</span>
          <!--          <search-condition-->
          <!--            :conditionLabel="filterParams.conditionLabel"-->
          <!--            @deleteFilter="deleteFilter"-->
          <!--          ></search-condition>-->
        </div>
        <div>
          <el-button class="sa-button-refresh" icon="RefreshRight" @click="getData()"></el-button>
          <el-button
            class="sa-button-refresh"
            icon="Search"
            @click="openFilter"
          ></el-button>
          <el-button
            v-auth="'seller.admin.business.add'"
            icon="Plus"
            type="primary"
            @click="addRow"
          >新建
          </el-button>
        </div>
      </div>
    </el-header>
    <el-main class="sa-p-0">
      <div class="sa-table-wrap panel-block panel-block--bottom" v-loading="loading">
        <el-table
          class="sa-table"
          :data="table.data"
          default-expand-all
        >
          <template #empty>
            <sa-empty />
          </template>
          <el-table-column type="expand">
            <template #default="props">
              <el-table
                class="sa-table sa-expand-table"
                :data="props.row.store"
                :span-method="objectSpanMethod"
              >
                <el-table-column width="96" />
                <el-table-column width="98" />
                <el-table-column width="214">
                  <template #default="scope">
                    <div class="sa-flex sa-row-center sa-col-center">
                      <sa-image :url="scope.row.thumb" size="80" />
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="name" width="142" align="center" show-overflow-tooltip />
                <el-table-column prop="industry_name" width="142" align="center" />
                <el-table-column prop="type_text" width="142" align="center" />
                <el-table-column prop="create_time" width="178" align="center" />
                <el-table-column width="160" align="center">
                  <template #default="scope">
                    <div class="text-center">GMV:{{ formatAmount(scope.row.gmv) }}元</div>
                  </template>
                </el-table-column>
                <el-table-column width="119" align="center">
                  <template #default="scope">
                    <!-- <div class="text-center" v-if="scope.row.business_status === 'normal'">正常</div> -->
                    <div class="text-center color-red" v-if="scope.row.business_status === 'close'">休息中</div>
                    <div class="text-center color-red" v-if="scope.row.business_status === 'ing'">营业中</div>
                  </template>
                </el-table-column>
                <el-table-column width="142" align="center">
                  <template #default="scope">
                    <div class="text-center">{{ scope.row.mobile || '-' }}</div>
                  </template>
                </el-table-column>
                <el-table-column width="142" align="center">
                  <template #default="scope">
                    <div class="text-center" v-if="scope.row.is_deposit_paid === 1">已缴纳</div>
                    <div class="text-center color-red" v-if="scope.row.is_deposit_paid === 0">未缴纳</div>
                  </template>
                </el-table-column>
                <el-table-column width="80">
                  <template #default="scope">
                    <el-button class="is-link" type="primary"
                               @click="editStore(scope.row)">编辑
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </template>
          </el-table-column>
          <el-table-column label="ID" prop="id" align="center" width="146" />
          <el-table-column label="LOGO" align="center" width="214">
            <template #default="scope">
              <div>商家账号:{{ scope.row.account }}</div>
            </template>
          </el-table-column>
          <el-table-column label="店铺名称" align="center" width="142" />
          <el-table-column label="商家行业" align="center" width="142" />
          <el-table-column label="角色名称" align="center" width="142" />
          <el-table-column label="入驻时间" prop="create_time" align="center" width="178" />
          <el-table-column label="商家收益" align="center" width="160">
            <template #default="scope">
              账户余额:{{ formatAmount(scope.row.money) }}元
            </template>
          </el-table-column>
          <el-table-column label="启用状态" align="center" width="119">
            <template #default="scope">
              <div class="text-center" v-if="scope.row.status === 'normal'">正常</div>
              <div class="text-center color-red" v-if="scope.row.status === 'close'">停业</div>
              <div class="text-center color-red" v-if="scope.row.status === 'disabled'">关闭</div>
            </template>
          </el-table-column>
          <el-table-column label="售后电话" align="center" width="142">
            <template #default="scope">
              <div class="text-center">{{ scope.row.mobile || '-' }}</div>
            </template>
          </el-table-column>
          <el-table-column label="保证金状态" align="center" width="142" />
          <el-table-column label="操作" width="80">
            <template #default="scope">
              <el-button v-auth="'seller.admin.business.edit'" class="is-link" type="primary"
                         @click="editAccount(scope.row)">编辑
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-main>
    <sa-view-bar>
      <template #right>
        <sa-pagination :pageData="pageData" @updateFn="getData" />
      </template>
    </sa-view-bar>
  </el-container>
</template>
<script setup>
  import { onMounted, reactive, ref } from 'vue';
  import { ElMessageBox } from 'element-plus';
  import { api } from './business.service';
  import { useModal, useSearch, usePagination } from '@/sheep/hooks';
  import _, { cloneDeep } from 'lodash';
  import details from './details.vue';
  import storeDetails from './storeDetails.vue';
  import addPush from './add.vue';
  import { composeFilter } from '@/sheep/utils';


  const { pageData } = usePagination();
  const loading = ref(false);

  const table = reactive({
    data: [],
  });

  const filterParams = reactive({
    tools: {
      user: {
        type: 'tinputprepend',
        placeholder: '请输入查询内容',
        field: 'user',
        user: {
          field: 'store.name',
          value: '',
        },
        options: [
          {
            label: '用户昵称',
            value: 'store.name',
          },
          {
            label: '店铺地址',
            value: 'address',
          },
          {
            label: '用户ID',
            value: 'store.id',
          }
        ],
      },
      mobile: {
        type: 'tinput',
        label: '联系电话',
        field: 'mobile',
        value: '',
        options: {
          data: [
            {
              label: '本地生活商家',
              value: 1,
            },
            {
              label: '电商品牌商家',
              value: 2,
            },
            {
              label: '供应链商家',
              value: 4,
            },

          ],
        },
      },
      status: {
        type: 'tselect',
        label: '启用状态',
        field: 'status',
        value: '',
        options: {
          data: [
            {
              label: '正常',
              value: 'normal',
            },
            {
              label: '停业',
              value: 'close',
            },
            {
              label: '关闭',
              value: 'disabled',
            },
          ],
        },
      },
    },
    data: {
      status: '',
      mobile: '',
      user: { field: 'store.name', value: '' },
    },
    conditionLabel: {},
  });

  const { openFilter, deleteFilter } = useSearch({ filterParams, getData });

  onMounted(() => {
    getData();
  });

  const formatAmount = (amount) => {
    return Number(amount).toLocaleString('en-US');
  };

  // 编辑店铺信息
  const editStore = (item) => {
    useModal(
      storeDetails,
      {
        title: '店铺信息',
        id: item.id,
      },
      {
        confirm: () => {
          getData();
        },
      },
      true,
    );
  };

  // 编辑账户信息
  const editAccount = (item) => {
    console.log("editAccount--item",item)
    useModal(
      details,
      {
        title: '商家信息',
        id: item.id,
      },
      {
        confirm: () => {
          getData();
        },
      },
    );
  };

  const addRow = () => {
    useModal(
      addPush,
      {
        title: '添加商家',
      },
      {
        confirm: () => {
          getData();
        },
      },
    );
  };

  // 获取列表数据
 async function getData (page) {
    loading.value = true;
    if (page) pageData.page = page;
   let tempSearch = _.cloneDeep(filterParams.data);
   let search = composeFilter(tempSearch, {
     'store.name': 'like',
     'store.id': 'like',
     'address': 'like',
     mobile: 'like',
   });
   console.log(search)
    const { error, data } = await api.list({
      page: pageData.page,
      list_rows: pageData.list_rows,
      ...search
    });
    loading.value = false;
    if (error === 0) {
      pageData.page = data.current_page;
      pageData.list_rows = data.per_page;
      pageData.total = data.total;
      table.data = data.data;
    }
  };

  // 合并第一列和第二列
  const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
    if (columnIndex === 0) {
      return {
        rowspan: 1,
        colspan: 2,
      };
    }
    if (columnIndex === 1) {
      return {
        rowspan: 0,
        colspan: 0,
      };
    }
  };
</script>
<style lang="scss" scoped>
  .el-main {
    :deep() {
      .el-table {
        --el-table-row-hover-bg-color: var(--sa-background-hex-hover);

        .el-table__row {
          background: var(--sa-background-hex-hover);
        }

        .el-table__header-wrapper {
          margin-bottom: 4px;
        }

        .el-table__expanded-cell {
          padding: 0;
          background: var(--sa-background-assist);
        }
      }

      .sa-expand-table {
        --el-table-row-hover-bg-color: var(--el-fill-color-light);

        .el-table__header-wrapper {
          margin-bottom: 0;
        }

        .el-table__row {
          background: var(--el-table-tr-bg-color);
        }

        .el-table__body tr:hover > td.el-table__cell {
          background-color: var(--sa-background-assist) !important;
        }

        .el-table__body tr.hover-row.current-row > td.el-table__cell,
        .el-table__body tr.hover-row.el-table__row--striped.current-row > td.el-table__cell,
        .el-table__body tr.hover-row.el-table__row--striped > td.el-table__cell,
        .el-table__body tr.hover-row > td.el-table__cell {
          background-color: var(--sa-background-assist) !important;
        }
      }
    }

    .sa-expand-table {
      :deep() {
        .el-table__header-wrapper {
          display: none;
        }
      }
    }
  }

  .color-red {
    color: #F56C6C;
  }

</style>
